<template>
  <div class="yhhuvhxs">
    <div class="user clearfix">
      <div class="left">
        <li @click="usernav = true" :class="usernav ? 'active' : ''">
          <img
            v-if="usernav == false"
            src="~@img/user/user-icon01-normal.png"
            alt
          />

          <img
            v-if="usernav == true"
            src="~@img/user/user-icon01-select.png"
            alt
          />
          个人中心
        </li>
        <li @click="usernav = false" :class="usernav ? '' : 'active'">
          <img
            v-if="usernav == true"
            src="~@img/user/user-icon02-normal.png"
            alt
          />
          <img
            v-if="usernav == false"
            src="~@img/user/user-icon02-select.png"
            alt
          />
          我的收藏
        </li>
      </div>
      <div class="right">
        <div v-if="usernav" class="right-yhhv clearfix">
          <div class="head">
            <span class="active">
              个人信息
            </span>
          </div>
          <div class="content">
            <div class="flex-form">
              <li>
                <span>姓名：</span>
                <el-input
                  v-model="real_name"
                  :disabled="bianji == true ? 'disabled' : false"
                ></el-input>
              </li>
              <li>
                <span>年龄：</span>
                <el-input
                  type="text"
                  v-model="age"
                  :disabled="bianji == true ? 'disabled' : false"
                />
              </li>
            </div>
            <div class="flex-form">
              <li>
                <span>性别：</span>
                <el-select
                  v-model="sex"
                  placeholder="请选择"
                  :disabled="bianji == true ? 'disabled' : false"
                >
                  <el-option label="男" value="1"></el-option>
                  <el-option label="女" value="2"></el-option>
                </el-select>
              </li>
              <li>
                <span>手机号：</span>
                <el-input type="text" disabled v-model="mobile" />
                <div
                  class="chakan"
                  @click="(dialogFormVisible = true), (timeshow = 0)"
                >
                  <img src="~@img/user/icon-xiugai.png" alt="" /> 修改
                </div>
                <el-dialog
                  title="更改手机号码"
                  :visible.sync="dialogFormVisible"
                >
                  <li>
                    <span>新手机号:</span>
                    <el-input
                      style="width: 80%"
                      type="text"
                      v-model="mobile1"
                    />
                  </li>
                  <li class="yzm-box">
                    <span>验证码:</span>
                    <el-input style="width: 80%" type="text" v-model="yzm" />
                    <span class="yzm" v-if="timeshow == 0" @click="ser_code"
                      >获取验证码</span
                    >
                    <span class="yzm" v-if="timeshow == 1" @click="ser_code"
                      >{{ time }}秒后可发送</span
                    >
                    <span class="yzm" v-if="timeshow == 2" @click="ser_code"
                      >重新发送</span
                    >
                    <!-- <span class="yzm" @click="ser_code">获取验证码</span> -->
                  </li>
                  <div slot="footer" class="dialog-footer">
                    <div class="qx" @click="dialogFormVisible = false">
                      取消
                    </div>
                    <div class="qd" @click="phoneChange">
                      确 定
                    </div>
                  </div>
                </el-dialog>
              </li>
            </div>
            <div class="flex-form">
              <li>
                <span>用户名：</span>
                <el-input
                  type="text"
                  v-model="username"
                  :disabled="bianji == true ? 'disabled' : false"
                />
              </li>
              <li>
                <span>邮箱：</span>
                <el-input type="text" disabled v-model="email" />
                <div
                  class="chakan"
                  @click="(dialogTableVisible1 = true), (timeshow = 0)"
                >
                  <img src="~@img/user/icon-xiugai.png" alt="" /> 修改
                </div>
                <el-dialog title="更改邮箱" :visible.sync="dialogTableVisible1">
                  <li>
                    <span>邮箱:</span>
                    <el-input style="width: 80%" type="text" v-model="yxtext" />
                  </li>
                  <li class="yzm-box">
                    <span>验证码:</span>
                    <el-input style="width: 80%" type="text" v-model="yxyzm" />
                    <span class="yzm" v-if="timeshow == 0" @click="email_code"
                      >获取验证码</span
                    >
                    <span class="yzm" v-if="timeshow == 1" @click="email_code"
                      >{{ time }}秒后可发送</span
                    >
                    <span class="yzm" v-if="timeshow == 2" @click="email_code"
                      >重新发送</span
                    >
                    <!-- <span class="yzm" @click="email_code">获取验证码</span> -->
                  </li>
                  <div slot="footer" class="dialog-footer">
                    <div class="qx" @click="dialogTableVisible1 = false">
                      取消
                    </div>
                    <div class="qd" @click="changeEmail">
                      确 定
                    </div>
                  </div>
                </el-dialog>
              </li>
            </div>
            <template v-if="yxyixia == 2">
              <div class="flex-form">
                <li>
                  <span>所属机构：</span>
                  <el-input type="text" disabled v-model="unit" />
                </li>
                <li>
                  <span>工作职务：</span>
                  <el-input type="text" disabled v-model="position" />
                </li>
              </div>
              <div class="flex-form">
                <li>
                  <span>职级：</span>
                  <el-input type="text" disabled v-model="level" />
                </li>
                <li>
                  <span>工作职能：</span>
                  <el-input
                    type="textarea"
                    autosize
                    placeholder="请输入内容"
                    disabled
                    v-model="funct"
                  ></el-input>
                </li>
              </div>
            </template>
            <li v-if="yxyixia == 2">
              <span>密码：</span>
              <el-input
                type="password"
                disabled
                v-model="password"
                placeholder="***********"
              />
              <div
                class="chakan chakan3"
                @click="(dialogTableVisible2 = true), (timeshow = 0)"
              >
                <img src="~@img/user/icon-xiugai.png" alt="" /> 修改
              </div>
              <el-dialog
                class="password"
                title="修改密码"
                :visible.sync="dialogTableVisible2"
              >
                <li>
                  初始密码:
                  <el-input
                    type="password"
                    style="width: 80%"
                    v-model="password1"
                  />
                </li>
                <li>
                  新 密 码 :
                  <el-input
                    type="password"
                    style="width: 80%"
                    v-model="password2"
                  />
                </li>
                <li>
                  确认密码:
                  <el-input
                    type="password"
                    style="width: 80%"
                    v-model="password3"
                  />
                </li>
                <div slot="footer" class="dialog-footer">
                  <div class="qx" @click="dialogTableVisible2 = false">
                    取消
                  </div>
                  <div class="qd" @click="changepassword">
                    确 定
                  </div>
                </div>
              </el-dialog>
            </li>
            <el-button v-if="bianji" @click="bianji = false" class="bgji">
              编 辑
            </el-button>
            <el-button v-if="!bianji" @click="personal" class="bgji">
              提 交
            </el-button>
          </div>
        </div>
        <div v-else class="right-ubcj">
          <div class="head">
            <span :class="fivshow == 2 ? 'active' : ''" @click="xuanzeqiye(2)">
              产业
            </span>
            <span :class="fivshow == 1 ? 'active' : ''" @click="xuanzeqiye(1)">
              企业
            </span>
          </div>
          <div class="r-top" v-if="fivshow == 1">
            企业类型：
            <el-select
              @change="changeCollect"
              v-if="fivshow == 1"
              v-model="qiye"
              placeholder="请选择"
            >
              <el-option label="太原企业" value="1"></el-option>
              <el-option label="全国企业" value="2"></el-option>
            </el-select>
          </div>
          <template v-if="fivshow == 1">
            <el-table
              key="企业"
              :data="list1"
              ref="multipleTable"
              border
              stripe
              row-key="id"
              style="width: 100%;"
              :height="540"
              tooltip-effect="light"
              :header-cell-style="{
                textAlign: 'center',
              }"
              :cell-style="{
                textAlign: 'center',
              }"
            >
              <el-table-column prop="company_name" label="企业名称">
              </el-table-column>
              <el-table-column prop="create_time" label="收藏时间">
              </el-table-column>
              <el-table-column prop="build_date" label="成立时间">
              </el-table-column>
              <el-table-column :show-overflow-tooltip="true" label="操作">
                <template slot-scope="scope">
                  <span class="tab-btn" @click="ddelete(scope.row.id)">
                    取消收藏
                  </span>
                </template>
              </el-table-column>
            </el-table>
            <!-- <el-pagination
                @current-change="handleCurrentChange1"
                :current-page.sync="page1"
                :page-size="per_page1"
                layout=" prev, pager, next"
                :total="total1"
              >
              </el-pagination> -->
          </template>
          <template v-if="fivshow == 2">
            <el-table
              class="m-30"
              key="产业"
              :data="list1"
              ref="multipleTable"
              border
              stripe
              row-key="id"
              style="width: 100%;"
              :height="540"
              tooltip-effect="light"
              :header-cell-style="{
                textAlign: 'center',
              }"
              :cell-style="{
                textAlign: 'center',
              }"
            >
              <el-table-column
                :show-overflow-tooltip="true"
                label="产业名称"
                prop="industry_name"
              >
              </el-table-column>
              <el-table-column
                :show-overflow-tooltip="true"
                label="收藏时间"
                prop="create_time"
              >
              </el-table-column>
              <el-table-column :show-overflow-tooltip="true" label="操作">
                <template slot-scope="scope">
                  <span class="tab-btn" @click="ddelete(scope.row.id)">
                    取消收藏
                  </span>
                </template>
              </el-table-column>
            </el-table>
            <!-- <el-pagination
              @current-change="handleCurrentChange2"
              :current-page.sync="page2"
              :page-size="per_page2"
              layout=" prev, pager, next"
              :total="total2"
            >
            </el-pagination> -->
          </template>

          <div class="block">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page.sync="page"
              :page-size="10"
              layout="prev, pager, next"
              :total="allpage"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  userdetail,
  collect,
  ddelete,
  ser_code,
  phoneChange,
  email_code,
  changeEmail,
  changepassword,
  personal,
} from "@/api/usercenter";

export default {
  data() {
    return {
      dialogFormVisible: false,
      yzm: "",
      dialogTableVisible1: false,
      dialogTableVisible2: false,
      yxyzm: "",
      usernav: true,
      yxtext: "",
      password1: "",
      password2: "",
      password3: "",
      fivshow: 2,
      age: "",
      email: "",
      flag: "",
      funct: "",
      level: "",
      mobile: "",
      mobile1: "",
      position: "",
      real_name: "",
      section: "",
      sex: "",
      unit: "",
      username: "",
      page: 1,
      qiye: "1",
      list1: [],
      allpage: 1,
      yxyixia: 1,
      bianji: true,
      password: "",
      sexid: "",
      timeshow: 0,
      time: "60",
    };
  },
  watch: {
    "$route.name": function(nv, ov) {
      if (nv == "yhhuvhxs") {
        this.collect();
      }
    },
  },
  created() {
    this.getuserdetail();
    this.collect();
  },
  methods: {
    goDetail(type, id) {
      this.$router.push({
        name: "enterprise",
        params: {
          id,
          activeMenu: "yhhuvhxs",
          type: type == 1 ? "ty" : "qg",
        },
      });
    },
    changeCollect() {
      this.page = 1;
      this.collect();
    },
    async collect() {
      const res = await collect({
        page: this.page,
        per_page: 10,
        classify: this.fivshow,
        choice: this.qiye,
      });
      this.allpage = res.maxnum;
      this.list1 = res.ob_list;
    },

    handleCurrentChange(val) {
      this.page = val;
      this.collect();
    },

    async ddelete(id) {
      const ser = await ddelete({
        id: id,
        classify: this.fivshow,
        choice: this.qiye,
      });
      this.page = 1;
      this.collect();
    },
    // 密码验证
    allSame(value) {
      let data = value.split("");
      let chartCode = []; // 存放ASCII码
      let same = true;
      for (let i in data) {
        chartCode.push(value.charCodeAt(i));
        if (chartCode.length === data.length) {
          for (let i = 1; i <= chartCode.length; i++) {
            if (Math.abs(Number(chartCode[i]) - Number(chartCode[i - 1])) > 1) {
              same = false;
              break;
            }
          }
        }
      }
      return same;
    },
    // 密码验证
    passMessage(s) {
      var i = /[0-9]+/;
      var str = /[A-Za-z]/;
      var spec = /[,.<>{}~!@#$%^&*]/;
      if (!str.test(s)) {
        return "必须包含字母";
      }
      if (!i.test(s)) {
        return "必须包含数字";
      }
      if (!spec.test(s)) {
        return "必须包含特殊字符。例如：!@#$%^&* 其中一个或多个";
      }
    },
    // 更改密码
    async changepassword() {
      if (this.password1 == "") {
        this.$message({
          message: "请填写原密码",
          type: "error",
        });
        return false;
      }
      if (this.password2 == "") {
        this.$message({
          message: "请填写新密码",
          type: "error",
        });
        return false;
      }
      if (this.password3 == "") {
        this.$message({
          message: "请填写确认新密码",
          type: "error",
        });
        return false;
      }
      let msg = this.passMessage(this.password2);
      if (msg) {
        this.$message({
          message: msg,
          type: "error",
        });
        return false;
      }
      if (this.password2.length < 8) {
        this.$message({
          message: "密码长度应8位以上",
          type: "error",
        });
        return false;
      }
      if (this.allSame(this.password2)) {
        this.$message({
          message: "不能使用连续性字母，数字作为密码",
          type: "error",
        });
        return false;
      }
      if (this.password3 != this.password2) {
        this.$message({
          message: "新密码与确认密码不一致",
          type: "error",
        });
        return false;
      }
      const ser = await changepassword({
        password: this.password1,
        repassword: this.password2,
        newpass: this.password3,
      });
      if (ser.code == 0) {
        this.$message({
          message: ser.msg,
          type: "success",
        });
      } else {
        this.$message({
          message: ser.msg,
          type: "error",
        });
      }
      this.getuserdetail();
    },

    //提交
    async personal() {
      if (this.sex == "1" || this.sex == "男") {
        this.sexid = 1;
      } else {
        this.sexid = 2;
      }
      const ser = await personal({
        real_name: this.real_name,
        age: this.age,
        sex: this.sexid,
        name: this.username,
      });

      if (ser.code == 0) {
        this.$message({
          message: ser.msg,
          type: "success",
        });
      } else {
        this.$message({
          message: ser.msg,
          type: "error",
        });
      }
      this.getuserdetail();

      if (ser.code == "0") {
        this.bianji = true;
      }
    },

    //获取手机验证码
    async ser_code() {
      if (this.mobile1 == "") {
        this.$message.warning("请填写手机号！");
        return;
      }
      this.time = 60;
      const ser = await ser_code({
        mobile: this.mobile1,
      });
      if (ser.code == 0) {
        this.$message({
          message: ser.msg,
          type: "success",
        });
        this.timeshow = 1;
        this.countdown();
      } else {
        this.timeshow = 0;
        this.$message({
          message: ser.msg,
          type: "error",
        });
      }
    },

    // 确定更改手机号
    async phoneChange() {
      if (this.mobile1 == "") {
        this.$message({
          message: "请填写手机号",
          type: "error",
        });
        return false;
      }
      const ser = await phoneChange({
        mobile: this.mobile1,
        sms_code: this.yzm,
      });

      if (ser.code == 0) {
        this.$message({
          message: ser.msg,
          type: "success",
        });
      } else {
        this.$message({
          message: ser.msg,
          type: "error",
        });
      }
      this.getuserdetail();
    },

    //获取邮箱验证码
    async email_code() {
      this.time = 60;
      if (this.yxtext == "") {
        this.$message({
          message: "请输入邮箱",
          type: "error",
        });
        return false;
      }
      const ser = await email_code({
        email: this.yxtext,
      });
      if (ser.code == 0) {
        this.$message({
          message: ser.msg,
          type: "success",
        });
        this.timeshow = 1;
        this.countdown();
      } else {
        this.timeshow = 0;
        this.$message({
          message: ser.msg,
          type: "error",
        });
      }
    },
    countdown() {
      var that = this;
      setInterval(function() {
        if (that.time > 0) {
          that.time--;
        } else {
          that.timeshow = 2;
        }
      }, 1000);
    },
    // 确定更改邮箱号
    async changeEmail() {
      if (this.yxtext == "") {
        this.$message({
          message: "请输入邮箱",
          type: "error",
        });
        return false;
      }
      if (this.yxyzm == "") {
        this.$message({
          message: "请输入验证码",
          type: "error",
        });
        return false;
      }
      const ser = await changeEmail({
        email: this.yxtext,
        email_code: this.yxyzm,
      });

      if (ser.code == 0) {
        this.$message({
          message: ser.msg,
          type: "success",
        });
        this.dialogTableVisible1 = true;
      } else {
        this.$message({
          message: ser.msg,
          type: "error",
        });
      }
      this.getuserdetail();
    },

    xuanzeqiye(e) {
      if (e == 1) {
        this.fivshow = 1;
      }
      if (e == 2) {
        this.fivshow = 2;
      }
      this.page = 1;
      this.collect();
    },

    async getuserdetail() {
      const res = await userdetail();
      this.age = res.age;
      this.email = res.email;
      this.flag = res.flag;
      this.funct = res.funct;
      this.level = res.level;
      this.mobile = res.mobile;
      this.position = res.position;
      this.real_name = res.real_name;
      this.section = res.section;
      if (res.sex == 1) {
        this.sex = "男";
      } else {
        this.sex = "女";
      }
      this.unit = res.unit;
      this.username = res.username;
      this.yxyixia = res.flag;
    },
  },
};
</script>

<style lang="less" scoped>
.user {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.yhhuvhxs {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: rgb(243, 243, 243);
  li {
    list-style-type: none;
  }
  .left {
    margin-right: 30px;
    width: 300px;
    height: 100%;
    float: left;
    background: #fff;
    font-size: 18px;

    li {
      display: flex;
      width: 100%;
      list-style-type: none;
      height: 60px;
      line-height: 60px;
      font-size: 20px;
      font-weight: 400;
      color: #333333;
      align-items: center;
      padding: 0 30px;
      cursor: pointer;

      &.active {
        font-size: 20px;
        font-weight: bold;
        color: #446db3;
        background: #f7faff;
        border-right: 4px solid #446db3;
      }

      img {
        vertical-align: middle;
        margin-right: 10px;
      }
    }
  }

  /deep/ .el-dialog {
    width: 50%;
    min-width: 550px;
  }

  .right {
    background: #fff;
    width: calc(100% - 300px - 30px);
    float: left;
    height: 100%;
    overflow-y: auto;
    .right-yhhv {
      .content {
        width: 1080px;
        padding: 50px 0 0 50px;
      }
      .flex-form {
        display: flex;
        justify-content: space-between;
      }
      li {
        position: relative;
        width: 465px;
        height: 54px;
        line-height: 54px;
        margin-bottom: 20px;
        list-style-type: none;
        display: flex;
        justify-content: space-between;
        span {
          display: block;
          float: left;
          width: 125px;
          height: 54px;
          font-size: 18px;
          color: #333333;
          line-height: 54px;
          text-align: left;
        }

        /deep/ .el-input {
          width: 350px;
          height: 54px;
          background: #ffffff;
        }
        /deep/ .el-select {
          width: 350px;
          height: 54px;
          background: #ffffff;
        }

        /deep/ .el-input.is-disabled .el-input__inner {
          background: #f7f7f7;
        }
        /deep/ .el-input__inner {
          width: 350px;
          background: #ffffff;
          border: 1px solid #cccccc;
          border-radius: 8px;
        }
      }

      .bgji {
        display: block;
        margin-top: 80px;
        padding: 0;
        width: 100px;
        height: 40px;
        background: #446db3;
        border-radius: 8px;
        font-size: 20px;
        font-weight: bold;
        color: #ffffff;
        line-height: 40px;
      }
    }

    .right-ubcj {
      .r-top {
        margin-left: 25px;
        height: 90px;
        text-align: left;
        font-size: 14px;
        color: #333333;
        line-height: 90px;
      }
      .m-30 {
        margin-top: 30px;
      }
      .table {
        width: 100%;

        li:nth-child(odd) {
          background: #f3f6fb;
        }

        li {
          width: 97%;
          height: 40px;
          margin-left: 1.5%;
          line-height: 40px;
          color: #222222;

          span {
            display: block;
            width: 25%;
            float: left;
          }

          span:nth-child(4) {
            color: orange;
            cursor: default;
          }
        }
      }
    }
  }
}
.head {
  padding-left: 20px;
  height: 80px;
  line-height: 80px;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #446db3;
  background: #ffffff;
  box-shadow: 0px 2px 6px 0px rgba(4, 0, 0, 0.1);
  text-align: left;
  span {
    margin-right: 75px;
    display: inline-block;
    height: 80px;
    font-size: 20px;
    font-weight: 400;
    color: #333333;
    cursor: default;
  }
  span.active {
    font-weight: bold;
    color: #446db3;
    border-bottom: 4px solid #446db3;
  }
}

.chakan {
  position: absolute;
  top: 0px;
  right: 10px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #999999;
  cursor: default;
  img {
    width: 14px;
    height: 15px;
    margin-right: 5px;
    vertical-align: middle;
  }
}

/deep/ .el-select {
  // float: right;
  margin-left: 30px;
}

/deep/ .el-textarea {
  width: 350px;

  textarea {
    height: 40px !important;
    resize: none;
  }
}
/deep/ .el-textarea.is-disabled .el-textarea__inner {
  width: 350px;
  background: #f7f7f7;
  border: 1px solid #cccccc;
  border-radius: 8px;
}

/deep/ .el-table {
  width: calc(100% - 50px) !important;
  margin: 0 25px 0 25px;
}
.tab-btn {
  display: inline-block;
  width: 80px;
  height: 24px;
  background: #f89718;
  border-radius: 4px;
  font-size: 14px;
  color: #ffffff;
  line-height: 24px;
  cursor: default;
}
/deep/ .el-table--border th.el-table__cell {
  height: 48px;
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  background: #446db3;
  border-right: none;
}
/deep/
  .el-table--striped
  .el-table__body
  tr.el-table__row--striped
  td.el-table__cell {
  background: #f7faff;
}
/deep/ .el-pagination {
  text-align: right;
  margin: 20px 25px 0 0;
}
/deep/ .el-pager li {
  margin: 0 8px;
  min-width: 40px;
  height: 40px;
  line-height: 40px;
  background: #fafafa;
  box-shadow: 0px 0px 4px 0px rgba(86, 86, 86, 0.11);
  border-radius: 6px;
  font-size: 16px;
  color: #666666;
}
/deep/ .el-pager li.active {
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  background: #5889dc;
  box-shadow: 0px 0px 3px 0px rgba(0, 50, 89, 0.4);
}
/deep/ .el-pagination button {
  width: 40px;
  height: 40px;
  background: #fafafa;
  box-shadow: 0px 0px 4px 0px rgba(86, 86, 86, 0.11);
  border-radius: 6px;
}

/deep/ .el-dialog {
  padding: 0 40px;
  width: 720px !important;
  height: 430px !important;
  top: 50%;
  margin-top: -215px !important;
  box-shadow: 0px 5px 50px 0px rgba(186, 186, 186, 0.5);
  border-radius: 20px;
}
/deep/.password .el-dialog {
  width: 720px !important;
  height: 510px !important;
  top: 50%;
  margin-top: -255px !important;
}
/deep/ .el-dialog__header {
  padding-top: 30px;
  height: 100px;
  line-height: 70px;
  border-bottom: 1px dashed #ddd;

  .el-dialog__title {
    font-size: 30px;
    font-weight: bold;
    color: #446db3;
  }
}

/deep/.el-dialog__body {
  padding: 50px 20px;
  li {
    margin: 0 auto;
    span {
      width: 80px !important;
      padding: 0 !important;
      font-size: 18px;
      color: #333333;
    }
    .el-input__inner {
      width: 350px;
      height: 54px;
      background: #f7f7f7 !important;
      border-radius: 8px;
      border: none !important;
    }
  }
}
/deep/.dialog-footer {
  display: flex;
  justify-content: space-evenly;
  .qx {
    display: inline-block;
    width: 247px;
    height: 48px;
    line-height: 44px;
    border: 2px solid #446db3;
    border-radius: 10px;
    font-size: 26px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #446db3;
    text-align: center;
    cursor: default;
  }
  .qd {
    display: inline-block;
    width: 247px;
    height: 48px;
    line-height: 44px;
    background: #446db3;
    box-shadow: 0px 2px 5px 0px rgba(68, 109, 179, 0.5);
    border: 2px solid #446db3;
    border-radius: 10px;
    font-size: 26px;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    cursor: default;
  }
}
.yzm-box {
  position: relative;
  .yzm {
    position: absolute;
    top: 1%;
    right: 20px;
    display: inline-block;
    width: 110px !important;
    cursor: pointer;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #cccccc !important;
  }
}
/*分辨率低于1680，采用下面的样式*/
@media screen and (max-device-width: 1680px) {
  /deep/ .el-table {
    height: 540px !important;
  }
}
/*分辨率低于1536，采用下面的样式*/
@media screen and (max-device-width: 1536px) {
  /deep/ .el-table {
    height: 489px !important;
  }
}
/*分辨率低于1440，采用下面的样式*/
@media screen and (max-device-width: 1440px) {
  /deep/ .el-table {
    height: 540px !important;
  }
}

/*分辨率低于1366，采用下面的样式*/
@media screen and (max-device-width: 1366px) {
  .yhhuvhxs .right .right-yhhv .el-dialog__body li /deep/ .el-input__inner {
    width: 350px;
  }
  .yhhuvhxs .right .right-yhhv .content {
    width: 1000px;
  }
  .yhhuvhxs .right .right-yhhv li /deep/ .el-select,
  /deep/ .el-textarea.is-disabled .el-textarea__inner,
  .yhhuvhxs .right .right-yhhv li /deep/ .el-select,
  .yhhuvhxs .right .right-yhhv li /deep/ .el-input,
  .yhhuvhxs .right .right-yhhv li /deep/ .el-input__inner,
  /deep/ .el-textarea {
    width: 300px;
  }
  .yhhuvhxs .right .right-yhhv li {
    justify-content: flex-start;
  }
  .chakan {
    right: 50px;
  }
  /deep/ .el-select {
    margin-left: 0;
  }
}

/*分辨率低于1180，采用下面的样式*/
@media screen and (max-device-width: 1180px) {
  /deep/ .el-table {
    height: 440px !important;
  }
  .yhhuvhxs .right .right-yhhv .content {
    width: 800px;
  }
  .yhhuvhxs .right .right-yhhv li /deep/ .el-select,
  /deep/ .el-textarea.is-disabled .el-textarea__inner,
  .yhhuvhxs .right .right-yhhv li /deep/ .el-select,
  .yhhuvhxs .right .right-yhhv li /deep/ .el-input,
  .yhhuvhxs .right .right-yhhv li /deep/ .el-input__inner,
  /deep/ .el-textarea {
    width: 280px;
  }
  .chakan {
    right: 40px;
  }
  .chakan3 {
    right: 126px;
  }
  .yhhuvhxs .right .right-yhhv li {
    justify-content: flex-start;
  }

  .yhhuvhxs .right .right-yhhv li span {
    width: 70px;
    font-size: 14px;
  }
}
/*分辨率低于1024，采用下面的样式*/
@media screen and (max-device-width: 1024px) {
  /deep/ .el-table {
    height: 392px !important;
  }
  .yhhuvhxs .right .right-yhhv .content {
    width: 690px;
  }
  .yhhuvhxs .right .right-yhhv li /deep/ .el-select,
  /deep/ .el-textarea.is-disabled .el-textarea__inner,
  .yhhuvhxs .right .right-yhhv li /deep/ .el-select,
  .yhhuvhxs .right .right-yhhv li /deep/ .el-input,
  .yhhuvhxs .right .right-yhhv li /deep/ .el-input__inner,
  /deep/ .el-textarea {
    width: 220px;
  }

  .chakan {
    right: 40px;
  }
  .chakan3 {
    right: 180px;
  }
  .yhhuvhxs .right .right-yhhv li {
    justify-content: flex-start;
  }
  .yhhuvhxs .right .right-yhhv li span {
    width: 70px;
    font-size: 14px;
  }
  .yhhuvhxs .right .right-yhhv .bgji {
    margin-top: 36px;
  }
}
</style>
